<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="isVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :width="width"
      class="app-dialog"
    >
      <div class="container">
        <slot></slot>
      </div>

      <div slot="footer">
        <slot name="btn-front"></slot>
        <el-button @click="handleClose">取消</el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
        >{{btnOkLabel}}</el-button>
        <slot name="btn-behind"></slot>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'basic-dialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    isVisible: {
      type: Boolean,
      default: false
    },
    btnOkLabel: {
      type: String,
      default: '确定'
    },
    width: {
      type: String,
      default: '580px'
    }
  },
  methods: {
    handleClose() {
      this.$emit('closeDialog')
    },
    handleConfirm() {
      this.$emit('confirmDialog')
    }
  }
}
</script>

<style lang="scss">
.app-dialog {
  .el-dialog__header {
    padding: 20px;
  }
  .el-dialog__footer {
    padding: 10px;
    background: #fff;
  }
  .el-dialog__body {
    padding: 0;
    border-top: 1px solid #eaeefb;
    border-bottom: 1px solid #eaeefb;
    min-height: 250px;
    max-height: 500px;
    overflow-y: auto;
    .container {
      > span {
        display: block;
      }
      overflow-y: auto;
      padding: 20px 20px;
    }
  }
}
</style>
